<template>
	<view>
		<view style="bottom: 90px;">
			 <u-checkbox-group
				v-model="checkboxValue"
				placement="column"
				@change="checkboxChange">
				<view  v-for="(item, index) in catrList">
					<view style="padding: 15px;" >
						<!-- 复选框 -->
							<u-checkbox
								:customStyle="{marginBottom: '8px'}"
								style="display: inline-block;float: left;margin-top:50px;"
								:key="item.id"
								:name="item.id">
							</u-checkbox>
							<!-- 图片 -->
							<image :src="item.goods.cover_url" style="width: 200rpx;height: 200rpx;float: left;"></image>
							<view style="display: inline-block;height: 100%;">
								<text style="font-size: 14px;font-weight: 600;">{{item.goods.title}}</text>
								<br>
								<text style="font-size: 6px;font-weight: 90;color: #ababa9;">{{item.goods.description}}</text>
								<view style="padding-top: 30px;">
									<text style="color: red;">￥ {{item.goods.price}}</text>
									<view style="display: inline-block;float: right;margin-top: -10px;margin-left:30px">
										<button @click="incNum(item.id,item.num)" style="width: 20px;height: 40px;display: inline-block;">-</button>
										<input type="number" v-model="item.num||1" style="text-align:center;width: 30px;height:40px;background-color: #ababa9;display: inline-block;">
										<button @click="addNum(item.id,item.num)" style="width: 40px;height: 40px;display: inline-block;">+</button>
										<u-icon @click="delCart(item.id,item.goods.title)" style="display: inline-block;padding-left: 10px;" name="trash" color="#2979ff" size="28"></u-icon>
									</view>
								</view>
							</view>
						</view>
					</view>
				</u-checkbox-group>
			</view>
			<!-- 底部 -->
			<view style="bottom:50px;position: fixed;width: 100%;padding-left: 10px;margin-right: 10px;" >
			  <u-checkbox-group
			            placement="column"
									 v-model="bottom"
									@change="allChecked"
									style="display: inline-block;"
			        >
			            <u-checkbox
			                :customStyle="{marginBottom: '8px'}"
			                 label="全选"
			                 name="1"
			            >
			            </u-checkbox>
			        </u-checkbox-group>
				<view style="display: inline-block;float: right;">
					<text>合计:</text>
					<text style="color: red;">￥{{totalPrice}}</text>
					<view  class="right" @click="pay">
						<view class="buy btn u-line-1" >立即购买</view>
					</view>
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				catrList:[],
				radiolist1: [{
            name: '全选',
            disabled: false
          }],
					radiovalue1:'',
				checkboxValue:[],
				bottom:[],
			}
		},
		onShow() {
			this.getCatrList()
		},
		onHide() {
			this.checkboxValue = []
		},
		computed:{
			totalPrice(){
				return this.catrList.reduce((pre,item)=>{
				  if(item.is_checked==1){
						pre = pre + item.goods.price * item.num
					}
					return pre
				},0)
			}
		},
		methods: {
			//全选
			async allChecked(list){
				if(list.length>0){
					this.catrList.forEach(item=>{
						if(item.is_checked===0){
							this.checkboxValue.push(item.id)
						}
					})
				}else{
					this.checkboxValue = []
				}
				await this.$u.api.checkedCart({cart_ids:this.checkboxValue})
			},
			//获取购物车商品
			async getCatrList(){
				let res = await this.$u.api.cartList()
				this.catrList = res.data
				this.checkIds()
			},
			//点击复选框
			async checkboxChange(list){
				this.checkboxValue = list
				//底部全选框
				if(this.checkboxValue.length === this.catrList.length){
					this.bottom.push('1')
				}else{
					this.bottom = []
				}
				await this.$u.api.checkedCart({cart_ids:this.checkboxValue})
			
			},
			//收集已选择的复选框id
			checkIds(){
				this.catrList.forEach(item=>{
					if(item.is_checked==1){
						this.checkboxValue.push(item.id)
					}
				})
				//底部全选框
				if(this.checkboxValue.length === this.catrList.length){
					this.bottom.push('1')
				}else{
					this.bottom = []
				}
			},
			//点击减号
			async incNum(id,num){
				try{
					let res = await this.$u.api.cartNum(id,{num:num})
				}catch(e){
					this.$u.toast(e.data.errors.num[0])
				}
			},
			//点击加号
			async addNum(id,num){
				try{
					let res = await this.$u.api.cartNum(id,{num:num})
				}catch(e){
					this.$u.toast(e.data.errors.num[0])
				}
			},
			//移除购物车
			async delCart(id,name){
				await this.$u.api.cartDel(id)
				this.checkboxValue = []
				this.$u.toast('移除'+name+'成功')
			},
			//支付
			pay(){
				this.$u.route({
					url:'pages/cart/orderPre'
				})
			}
		}
	}
</script>

<style lang="scss">
.right {
			display: flex;
			float: right;
			right: 0;
			font-size: 28rpx;
			align-items: center;
			.btn {
				line-height: 66rpx;
				padding: 0 30rpx;
				border-radius: 36rpx;
				color: #ffffff;
			}
			.cart {
				background-color: #ed3f14;
				margin-right: 30rpx;
			}
			.buy {
				margin-top: -10px;
				margin-right: 15px;
				left: 10px;
				background-color: #ff7900;
			}
		}
</style>
